<template>
	<view class="ep-list-m">
		<view class="listItem" v-for="(item,index) in list" :key="index" :data-id="item.id" @click="click">
			<image class="ep-img" :src="item.image_path" mode="aspectFill" ></image>
			<view class="listItem-content">
				<text class="list-title" v-text="item.title"></text>
				<view class="list-tn">
					<view class="list-tim-r"><text class="list-tim" v-text="item.time"></text>{{fz}}</view>
					<view><text class="list-num">{{ xxrs }}</text><text v-text="item.learn_count"></text></view>
				</view>
				<view class="listItem-charge">
					<view class="list-price-row">
					<view class="list-price">{{ rmb }}<text v-text="item.true_price"></text></view>
					<view class="list-delprice">{{ rmb }}<text v-text="item.price"></text></view>
					</view>
					<text class="list-tab">{{ xsth }}</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	name: 'ep-list-m',
	props:{
		list:Array
	},
	data() {
		return {
			goUrl: this.urls,
			fz:"分钟",
			xxrs:"学习人数：",
			xsth:"限时特惠",
			rmb:"￥"
		};
	},
	methods: {
		click(e) {
		    this.$emit('click');
			this.$router.push({
				path: '../../pages/course/course-detail',
				/* query: {
					id: e.currentTarget.dataset.id
					} */
				params: {
					id: e.currentTarget.dataset.id
				}
			})
		}
	}
}
</script>

<style lang="scss">
    .ep-list-m{
	    display: flex;
	    flex-direction:column;
		flex-wrap: nowrap;
	    background: #fff;
		
    }	
    .listItem {
	    display: flex;
	    flex-direction:row;
	    flex-wrap:nowrap;
	    justify-content:space-between;
	    margin-bottom:0rpx;
		margin: 10rpx 0 40rpx 0;
    }
    .ep-img {
	    border-radius: 10rpx;
	    width:33%;
		height:133rpx;
	    margin-right:2%
	    
    }
    .listItem-content {
	    width:65%;
	    display: flex;
	    flex-direction:column;
	    flex-wrap: nowrap;
    }
    .list-title{
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: flex;
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block
    }
	.list-tn{
		display: flex;
		flex-direction:row;
		flex-wrap: nowrap;
		font-size: 20rpx;
		color: #656565;
	}
	.list-num{
		font-size: 20rpx;
		color: #656565;
	}
	.list-tn text{
		font-size: 20rpx;
		color: #656565;
	}
	.list-tim-r{
		margin-right: 40rpx;
	}
	.listItem-charge{
		display: flex;
		flex-direction:row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		
	}
	.list-price-row{
		display: flex;
		flex-direction:row;
		align-items: center;
	}
	.list-price{
		color: #195b3f;
		font-size: 28rpx;
		margin-right: 10rpx
	}
	.list-delprice{
		color: #333333;
		font-size: 24rpx;
		text-decoration:line-through
	}
	.list-tab{
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
		border-radius: 6rpx;
		padding:4rpx 14rpx;
		background: $uni-bg-color-gradient;
	}
</style>
